<template>
    <div>
        <div class="header">
            <div class="city"><router-link to='/home/city'>{{city}} </router-link></div>
            <div><router-link to='/home/search'><van-search id="search1" v-model="value" placeholder="请输入搜索关键词" /></router-link></div>
        </div>
        <van-swipe  class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in list" :key="index"><img :src="item.image_url" alt=""></van-swipe-item>
        </van-swipe>
        <div class="nav">
            <div class="nav1" v-for='(item,index) in list1'  :key="index">
                <div><img :src="item.icon_url"></div>
                <div>{{item.name}}</div>
            </div>
        </div>
        <div class="grey"></div>
        <div class="brand">
            <router-link to="/home/business"><div class="title">品牌制造商提供</div></router-link>
            <div class="brand1" v-for="(item,index) in list2"  :key="index">
                <div class="brand2">
                    <div class="name">{{item.name}}</div>
                    <div class="cell">{{item.floor_price}}起</div>
                    <img :src="item.new_pic_url">
                </div>
            </div>
        </div>
        <router-link :to="{path:'/home/new',query:{isHot:'',isNew:'1',order:'asc'}}"><div class="new">
            <div class="new1">
                <div class="new2">新品好物</div>
                <div class="new3">查看全部</div>
            </div>
        </div></router-link>
        <div class="tab">
            <div class="tab1" v-for='(item,index)  in list3'  :key="index">
                <router-link :to='`/home/detail/${item.id}`'>
                <div class="tab2"><img :src="item.list_pic_url"></div>
                <div class="tab3">{{item.name}}</div>
                <div class="tab4">{{item.goods_brief}}</div>
                </router-link>
            </div>
        </div>
         <router-link :to="{path:'/home/new',query:{isHot:'1',isNew:'0',order:'asc'}}"><div class="new">
            <div class="new4">
                <div class="new5">人气推荐,好物精选</div>
                <div class="new6">查看全部</div>
            </div>
        </div></router-link>
         <div class="tab">
            <div class="tab1" v-for='(item,index)  in list4'  :key="index">
                <router-link :to='`/home/detail/${item.id}`'><div class="tab2"><img :src="item.list_pic_url"></div>
                <div class="tab3">{{item.name}}</div>
                <div class="tab4">{{item.goods_brief}}</div>
                </router-link>
            </div>
        </div>
        <div class="grey"></div>
        <div class="zt">
            <div class="zt1">
                <div class="zt2">专题精选</div>
                <div><img src="../../img/right.png"></div>
            </div>
            <div class="tab">
            <div class="tab5" v-for='(item,index)  in list5'  :key="index">
                <div class="tab6"><img :src="item.item_pic_url"></div>
                <div class="tab3">{{item.title}}</div>
                <div class="tab4">{{item.subtitle}}</div>
            </div>
        </div>
        </div>
        <div class="sz">
            <div class="sz9" v-for="item in list6" :key="item.id">
            <div class="sz0">{{item.name}}好物</div>
                 <router-link :to='`/home/detail/${item.id}`'>
                 <div class="sz1" v-for='list in item.goodsList' :key="list.id">
                    <div class="szimg"><img :src="list.list_pic_url"></div>
                    <div class="szz">{{list.name}}</div>
                 </div>
                 </router-link>
                <div class="sz1">
                    <div class="sz7">{{item.name}}好物</div>
                    <div class="sz8"><img src="../../img/icon_go_more.png"></div>
                </div>
            </div>
        </div>
        

    
    
        <div id="allmap"></div>
    </div>
</template>

<script>
import { home  } from "@/api/home/index"
export default {
    data(){
        return{
            city:'',
            list:[],
            list1:[],
            list2:[],
            list3:[],
            list4:[],
            list5:[],
            list6:[],
        }
    },
    computed:{

    },
    created(){
        home()
        .then(res =>{
            console.log(res)
            this.list=res.banner
            this.list1=res.channel
            this.list2=res.brandList
            this.list3=res.newGoods
            this.list4=res.hotGoods
            this.list5=res.topicList
            this.list6=res.newCategoryList
        })

    },
    mounted(){
        var _this=this
        var map = new BMap.Map("allmap");
	    var point = new BMap.Point(116.331398,39.897445);
	    map.centerAndZoom(point,12);
    
	    var geolocation = new BMap.Geolocation();
	    geolocation.getCurrentPosition(function(r){
            console.log(r)
	    	if(this.getStatus() == BMAP_STATUS_SUCCESS){
                _this.city=r.address.city
                var mk = new BMap.Marker(r.point);
	    		map.addOverlay(mk);
	    		map.panTo(r.point);
	    		alert('您的位置：'+r.point.lng+','+r.point.lat);
	    	}
	    	else {
	    		alert('failed'+this.getStatus());
	    	}        
	    },{enableHighAccuracy: true})
    
        },
    methods:{

    }

}
</script>

<style lang='scss' scoped>
      .header{
          width: 100%;
          display: flex;
          justify-content: flex-start;
      }
      
      a{
          color: black;
      }
      .city{
          width: 90px;
          height: 50px;
          line-height: 50px;
          font-weight: 900;
          font-size: 16px;
      }
     .my-swipe .van-swipe-item img{
          height: 100%;
          width: 100%;    
      }
      .nav{
          width: 100%;
          height: 80px;
          display: flex;
          justify-content: flex-start;
      }
      .nav1{
          width: 20%;
      }
      .grey{
          
          width: 100%;
          height: 8px;
          background-color: #F4F4F4;
      }
      .brand{
          width: 100%;
          height: 300px;
      }
      .title{
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-align: center;
      }
      .brand2{
         position: relative;
         width: 50%;
         float: left;
      }
      .name{
          position: absolute;
          top: 15px;
          width: 50%;
          text-align: center;
          font-weight: 900;
          
      }
      .cell{
          position: absolute;
          top: 40px;
          width: 50%;
          height: 18px;
          overflow: hidden;
          font-weight: 900;
      }
      .brand2 img{
          width: 100%;
      }
      .new{
          width: 100%;
          height: 160px;
          background-color: #F4F4F4;
          overflow: hidden;
      }
      .new1{
          width: 100%;
          height: 122px;
          margin-top: 20px;
          background: url();
          background-size: 100% 100%;
          overflow: hidden;
      }
      .new2{
          width: 100%;
          margin-top: 20px;
          text-align: center;
          font-weight: 900;
          font-size: 25px;
          color: #A2C1E1;
          
      }
      .new3{
          margin-top: 10px;
          margin-left: 50%;
          transform: translateX(-50%);
          width: 100px;
          height: 30px;
          line-height: 30px;
          background-color: #D8E4F0;
          color: #A2C1E1;
          font-size: 16px;
      }
      .new4{
          width: 100%;
          height: 122px;
          margin-top: 20px;
          background: url(../../img/bgtopic.png);
          background-size: 100% 100%;
          overflow: hidden;
      }
      .new5{
          width: 100%;
          margin-top: 20px;
          text-align: center;
          font-weight: 900;
          font-size: 25px;
          color: #C0B594;
          
      }
      .new6{
          margin-top: 10px;
          margin-left: 50%;
          transform: translateX(-50%);
          width: 100px;
          height: 30px;
          line-height: 30px;
          background-color: #F4E9CB;
          color: #C0B594;
          font-size: 16px;
      }
      .tab{
          width: 100%;
           white-space: nowrap;
          height: 300px;
          overflow: scroll;
      }
      .tab1{
         
          width: 44%;
          height: 250px;
          
          display:inline-block;
      }
      .tab2{
          height: 160px;
      }
      .tab2 img{
          width: 100%;
          height: 100%;
      }
      .tab3{
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          font-weight: 900;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          text-align: left;
      }
      .tab4{
          font-size: 12px;
          color:  grey;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          text-align: left;
      }
      .tab5{
         
          width: 287px;
          height: 250px;
          
          display:inline-block;
      }
      .tab6 img{
          width: 280px;
          height: 160px;
          border-radius: 5%;
      }
      .zt{
          width: 100%;
          height: 350px;
      }
      .zt1{
          width: 100%;
          height: 60px;
          margin-top: 20px;
          div{
              float: left;

          }
          .zt2{
              width: 190px;
              font-size:16px;
              font-weight: 900;
              text-align: right;
          }
          img{
              width: 20px;
              height: 20px;
          }
          
      }
      .sz{
          width: 100%;
      }
      .sz9{
          width: 100%;
          height: 900px;
          background-color: #F4F4F4;
      }
      .sz0{
          width: 100%;
          height: 50px;
          text-align: center;
          background-color: #F4F4F4;
      }
      .sz1{
          float: left;
          width: 47%;
          height: 200px;
          margin-right: 10px;
          margin-bottom: 10px;
          background-color: white;
      }
      .szimg{
          width: 100%;
          height: 130px;
      }
      .szimg img{
          width: 100%;
          height: 100%;
      }
      .sz7{
          margin-top: 40px;
          font-size: 16px;
          font-weight: 900;
      }
      .sz8 img{
          margin-top: 20px;
          width: 36px;
          height: 37px;
      }


</style>